﻿@page "/documentation/diagram"
@layout DocumentationLayout
@inherits DocumentationPage

<PageTitle>Diagram - Documentation - Blazor Diagrams</PageTitle>

<h1>Diagram</h1>

<h2>Structure</h2>

The component <code>DiagramCanvas</code> generates the following structure:

<pre><code class="language-cshtml">
&lt;div class=&quot;diagram-canvas&quot; tabindex=&quot;-1&quot;&gt;
    &lt;!-- LAYERS --&gt;
&lt;/div&gt;
</code></pre>

You can add your own CSS classes using the <code>Class</code> parameter.

<h2>Layers</h2>

<p>
    It is very important to know that in Blazor Diagrams, everything is rendered in 2 layers:
</p>

<h3>SVG</h3>

<pre><code class="language-html">
&lt;svg class=&quot;diagram-svg-layer&quot; style=&quot;transform: translate(0px, 0px) scale(1); z-index: 0;&quot;&gt;
    &lt;!-- Links, Nodes, Controls, ... --&gt;
&lt;/svg&gt;
</code></pre>

<p>
    This layer is basically a svg. It is mainly used to render links, since they require the <code>&lt;path&gt;</code> element.<br />
    However, it is also possible to render nodes in it by inherting from <code>SvgNodeModel</code> or <code>SvgGroupModel</code>.
    This lets you use any svg elements and features with ease.
</p>

<h3>HTML</h3>

<pre><code class="language-html">
&lt;div class=&quot;diagram-html-layer&quot; style=&quot;transform: translate(0px, 0px) scale(1); z-index: 0;&quot;&gt;
</code></pre>

<p>
    This layer is a simple html div. It is mainly used to render nodes.
    It is very useful since you can re-use any html you might already have in your nodes, as well as include interactivity through inputs for example.
</p>

<h3>Additional Content</h3>

You can add additional content to each layer using the available render fragments:

<pre><code class="language-cshtml">
&lt;DiagramCanvas&gt;
    &lt;AdditionalHtml&gt;
        &lt;!-- EXTRA HTML --&gt;
    &lt;/AdditionalHtml&gt;
    &lt;AdditionalSvg&gt;
        &lt;!-- EXTRA SVG --&gt;
    &lt;/AdditionalSvg&gt;
&lt;/DiagramCanvas&gt;
</code></pre>

<NavigationButtons NextTitle="Behaviors"
                   NextLink="/documentation/diagram-behaviors" />